<template>
  <div>
    <my-table ref="myTable"
              :table-method="getTable"
              :form-desc="formDesc"
              :table-desc="tableDesc"
              @tableSelect="select"
              @row-click="handleRowClick"
              @row-dbClick="handleRowDbClick">
      <template #goodsCode="scope" >
<!--        <el-input v-model="scope.data.goodsCode"></el-input>-->
        <DateSelect v-model="scope.data.goodsCode"></DateSelect>
      </template>
      <template #modelName-table="scope">
        {{scope.row.joint}}
      </template>
      <template #action-table="scope">
        <el-button type="primary" link @click="myTable.refreshTable(true)">修改</el-button>
      </template>
    </my-table>
  </div>
</template>

<script setup lang="ts">
import MyTable from '../components/Table.vue'
import DateSelect from "../components/scrollDateSelect2.vue";
import {ref} from "vue";
// 搜索表单配置
const formDesc = {
  goodsCode: {
    type: "input",
    label: '编号',
  },
  printStatus: {
    label: '打印状态',
    type: "select",
    options: [
      {
        value:"1",
        label:'已打印'
      }, {
        value:"0",
        label:'未打印'
      },
    ],
  }
}
//表格配置
const tableDesc = {
  isSingleSelect:true,
  rowKey:'id',
  columns:[
    {
      type:'selection',
      reserveSelection:true,
    },
    {
      label: '竿节', prop: 'joint', align: "center",
    },
    {
      label: '名称', prop: 'modelName', align: "center",useSlot:true
    },
    {
      label: '切断', prop: 'cutLength', align: "center",
    },
    {
      label: '嵌合1', prop: 'inosculans', align: "center",
    },
    {
      label: '嵌合2', prop: 'inosculans2', align: "center",
    },
    {
      label: '前径', prop: 'anteriorDiameter', align: "center",
    },
    {
      label: '后径', prop: 'posteriorDiameter', align: "center",
    },
    {
      label: '操作', prop: 'action', align: "center",useSlot: true,
    },
  ]
}
const myTable = ref()
// 模拟请求接口
const getTable = (query={})=>{
  console.log(query,myTable.value.getSearchData(),'接口传参')
  return new Promise(resolve =>{
    setTimeout(()=>{
      resolve([{id:'1',joint:1111111},{id:'2',joint:222222},{id:'3',joint:333333}])
    },1000)
  })
}
//表格选择回调
const select = (selection:any)=>{
  console.log(selection,11111111)
}
const handleRowClick = (row:any)=>{
  console.log(row,2222222)
}
const handleRowDbClick = (row:any)=>{
  console.log(row,3333333)
}
</script>

<style scoped>

</style>
